<template>
    <div class="section-wrap">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患编号</label>
                </div>
                <div>
                    <p>{{detailData.No}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患类别</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <p>{{detailData.Category}}</p>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>隐患描述</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p class="textarea">{{detailData.Description}}</p>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <label>整改前照片</label>
                    <span>当前共{{detailData.ProblemImgs&&detailData.ProblemImgs.length>0?detailData.ProblemImgs.length:0}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload v-if="detailData.ProblemImgs&&detailData.ProblemImgs.length>0"
                            :imgList="detailData.ProblemImgs"></upload>
                    <strong v-else
                            class="no-img">暂无图片</strong>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>隐患措施</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <span v-if="detailData.Measure"
                          @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div>
                    <p class="textarea"
                       v-if="detailData.Measure"
                       :class="{'unfold':unfoldMeasure}">{{detailData.Measure | myTrim}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患级别</label>
                </div>
                <div>
                    <p>{{detailData.HdLevel}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改开始时间</label>
                </div>
                <div>
                    <p>{{detailData.ResolveStartTime.split(' ')[0]}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改结束时间</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailData.ResolveEndTime.split(' ')[0]}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>所属项目</label>
                </div>
                <div>
                    <p>{{detailData.DeptName}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目负责人</label>
                </div>
                <div>
                    <p>{{detailData.ProjectDutyPerson}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患部位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailData.ResolveArea}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改责任人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailData.ResolveAreaDutyPerson}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改单位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailData.ResolveDeptName}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改执行人</label>
                </div>
                <div>
                    <p>{{detailData.ResolveDutyPersonName}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改班组</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailData.ResolveGroup}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改班组责任人</label>
                </div>
                <div>
                    <p>{{detailData.ResolveGroupDutyPerson}}</p>
                </div>
            </div>
        </div>
        <div class="form-section">
            <h3>检查人信息</h3>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查单位</label>
                </div>
                <div>
                    <p>{{detailData.CheckDeptName}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查人</label>
                </div>
                <div>
                    <p>{{detailData.CheckPerson}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>电话</label>
                </div>
                <div>
                    <p>{{detailData.Tel}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查时间</label>
                </div>
                <div>
                    <p>{{detailData.CheckTime.split(' ')[0]}}</p>
                </div>
            </div>
        </div>
        <div v-for="(item,index) in detailData.Resolves"
             :key="`${index}`">
            <div class="form-section">
                <h3>
                    <span>整改信息</span>
                    <span>(第{{index+1 | toChinesNum}}次整改)</span>
                </h3>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>整改情况回复</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Description}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>实际完成时间</label>
                    </div>
                    <div>
                        <p>{{item.ResolveTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <div class="space-between">
                            <label>整改后照片</label>
                            <i class="iconfont icon-required"></i>
                        </div>
                        <span>当前共{{item.ResolveImgs.length}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload v-if="item.ResolveImgs.length"
                                :imgList="item.ResolveImgs"></upload>
                        <strong v-else
                                class="no-img">暂无图片</strong>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.Check">
                <h3>
                    <span>验收信息</span>
                    <span>(第{{index+1 | toChinesNum}}次验收)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验收负责人</label>
                    </div>
                    <div>
                        <p>{{item.Check.CheckDutyPerson}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验收日期</label>
                    </div>
                    <div>
                        <p>{{item.Check.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验收结果</label>
                    </div>
                    <div>
                        <p>{{item.Check.IsApproved?'验收合格':'验收不合格'}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>验收情况回复</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Check.Description}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <div class="space-between">
                            <label>验收后照片</label>
                            <i class="iconfont icon-required"></i>
                        </div>
                        <span>当前共{{item.Check.CheckImgs.length}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload v-if="item.Check.CheckImgs.length>0"
                                :imgList="item.Check.CheckImgs"></upload>
                        <strong v-else
                                class="no-img">暂无图片</strong>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.Verify">
                <h3>
                    <span>隐患审核</span>
                    <span>(第{{index+1 | toChinesNum}}次审核)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>审核日期</label>
                    </div>
                    <div>
                        <p>{{item.Verify.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>审核结果</label>
                    </div>
                    <div>
                        <p>{{item.Verify.IsApproved?'审核合格':'审核不合格'}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>审核情况回复</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Verify.Description}}</p>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.DepartReview">
                <h3>
                    <span>隐患复查</span>
                    <span>(第{{index+1 | toChinesNum}}次复查)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证日期</label>
                    </div>
                    <div>
                        <p>{{item.DepartReview.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证结果</label>
                    </div>
                    <div>
                        {{item.DepartReview.IsApproved?'验证合格':'验证不合格'}}
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证方式</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="select-section">
                        <div :class="{'active':item.DepartReview.Spot}">
                            现场
                        </div>
                        <div :class="{'active':item.DepartReview.Material}">
                            资料
                        </div>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>验证结论意见</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.DepartReview.Description}}</p>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.Confirm">
                <h3>
                    <span>复查验证</span>
                    <span>(第{{index+1 | toChinesNum}}次复查)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证日期</label>
                    </div>
                    <div>
                        <p>{{item.Confirm.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证结果</label>
                    </div>
                    <div>
                        {{item.Confirm.IsApproved?'验证合格':'验证不合格'}}
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证方式</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="select-section">
                        <div :class="{'active':item.Confirm.Spot}">
                            现场
                        </div>
                        <div :class="{'active':item.Confirm.Material}">
                            资料
                        </div>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>验证结论意见</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Confirm.Description}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-section"
             v-if="showSubmit">
            <h3>
                <span>隐患审核</span>
                <!-- <span>(第{{detailData.Resolves?detailData.Resolves.length:1 | toChinesNum}}次审核)</span> -->
            </h3>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>审核日期</label>
                </div>
                <group>
                    <datetime v-model="checkTime"></datetime>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>审核结果</label>
                </div>
                <group>
                    <popup-picker :data="accopt"
                                  placeholder='请选择'
                                  v-model="accoptVal"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>审核情况回复</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <textarea placeholder="请输入回复（自行换行）"
                              v-model="description"></textarea>
                </div>
            </div>
            <div class="btns">
                <!-- <button>保存</button> -->
                <button class="green width200"
                        @click="handleSubmit">提交</button>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import formatDate from '@/utils/formatDate'
import upload from '@/commonComponents/upload/index'
import myMenu from '@/commonComponents/menu'
export default {
    data () {
        return {
            accopt: [['审核合格', '审核不合格']], // 验收结果
            accoptVal: ['审核合格'],
            unfoldMeasure: false, // 展开隐患措施
            detailData: {},
            checkTime: formatDate(), // 审核时间
            description: '', // 审核情况
            userInfo: {},
            showSubmit: true
        }
    },
    components: {
        upload,
        myMenu
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.showSubmit = !(this.$route.query.type == 1 || this.getQuery().type == 1)
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.getData()
    },
    methods: {
        getData () {
            let params = {
                'allowPaging': false,
                'business': 'FetchHiddenDanger',
                'data': this.$route.query.id || this.getQuery().id,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.detailData = res.data.data
                }
            }).catch(() => {

            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        // 提交
        handleSubmit () {
            if (this.description === '') {
                this.$vux.toast.text('请输入审核情况回复')
                return false
            }
            this.$vux.loading.show({
                text: '正在提交...'
            })
            let params = {
                'allowPaging': true,
                'business': 'verifyHiddenDanger',
                'data': {
                    'checkTime': this.checkTime, // 审核时间
                    'description': this.description,
                    'hiddenDangerId': this.$route.query.id,
                    'isApproved': this.accoptVal[0] === '审核合格',
                    'resolveId': this.detailData.Resolves && this.detailData.Resolves[this.detailData.Resolves.length - 1] ? this.detailData.Resolves[this.detailData.Resolves.length - 1].Id : ''
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '8D2163CD716FD154B6C6364CA4C552AA',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params, this.YSFormData).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    setTimeout(() => {
                        this.$router.replace('/hideAudit')
                    }, 1000)
                }
            }).catch((res) => {
                console.log(res.data.info)
            }).finally(() => {
                this.$vux.loading.hide()
            })
        }
    }
}
</script>
<style scoped>
.select-section {
    display: flex;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 58px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
</style>
